.lease-goods {
  display: flex;
  flex-direction: column;

  .step-box {
    @include flex_center;
    height: 140px;

    .step-item {
      text-align: center;
      width: 232px;
      position: relative;

      &:before {
        content: "";
        position: absolute;
        top: 24px;
        height: 4px;
        background: #E6E6E6;
        width: 100%;
        left: -110px;
      }

      &:first-child:before {
        display: none;
      }

      .item {
        .img {
          width: 48px;
          height: 48px;
          @include flex_center;
          position: relative;
          z-index: 1;
          border: 4px solid #E6E6E6;
          border-radius: 50%;
          background: #fff;
          margin: 0 auto 5px auto;
          color: #E6E6E6;

          .iconfont {
            font-size: 24px;
          }
        }

        .label {
          color: $-color-gray;
        }

        .sub {
          color: $-color-muted;
          font-size: 12px;
        }
      }

      &.active {
        &:before {
          @include background_color();
        }

        .img {
          @include border_color();
          @include font_color();
        }

        .label {
          color: #1A1A1A;
        }

        .sub {
          color: $-color-gray;
        }
      }
    }
  }

  .body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .filter-box {
      padding: 0 40px;

      .search-box {
        @include flex_between;

        .label {
          font-size: 18px;
          font-weight: bold;
          color: #000;

          .iconfont {
            font-size: 20px;
          }
        }

        .search-input {
          background: #fff;
          border-radius: 4px;
          position: relative;

          ::v-deep .ivu-input {
            height: 36px;
            width: 300px;
            padding-right: 70px;
          }

          ::v-deep.ivu-icon {
            font-size: 20px;
            line-height: 36px;
          }

          ::v-deep .ivu-btn {
            position: absolute;
            right: 4px;
            height: 28px;
            width: 56px;
          }
        }
      }

      .category-list {
        padding-top: 12px;
        border-top: 1px solid #f4f4f4;
        margin-top: 12px;

        .cate-item {
          float: left;
          width: 80px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          border-radius: 4px;
          font-size: 15px;
          color: $-color-muted;
          margin-right: 10px;
          cursor: pointer;

          &:hover {
            @include font_color();
          }

          &.active {
            @include background_color();
            color: #333 !important;
            font-weight: bold;
          }
        }
      }
    }

    .list-body {
      flex: 1;
      overflow: auto;
      padding: 0 40px;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      position: relative;
      .list {
        //height: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
      }

      .goods-item {
        border: 1px solid #f4f4f4;
        border-radius: 4px;
        max-width: 216px;
        cursor: pointer;

        /*.ivu-carousel {
          height: 100%;
          width: 100%;
        }
        ::v-deep .ivu-carousel-list {
          width: 100%;
          height: 100%;
          &>div {
            width: 100%!important;
            height: 100%;
          }
        }*/
        .img {
          width: 100%;
          position: relative;
          padding-top: 100%;
          overflow: hidden;

          .c-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .info {
          border-top: 1px solid #f4f4f4;
          padding: 12px 14px;

          .name {
            @include line-over(1);
            font-size: 15px;

            span {
              display: inline-block;
              height: 16px;
              line-height: 16px;
              background: #FFFFFF;
              border-radius: 2px;
              border: 1px solid #FF7D17;
              color: #FF7D17;
              font-size: 10px;
              padding: 0 5px;
              margin-right: 5px;
            }
          }

          .desc {
            font-size: 12px;
            color: $-color-muted;
          }

          .handler {
            @include flex_between;
            align-items: flex-end;

            .price {
              font-size: 12px;

              span {
                font-size: 18px;
                font-family: changchun1hao;
                line-height: 0;
                vertical-align: -1px;
              }
            }

            .buy-btn {
              width: 64px;
              height: 22px;
              line-height: 22px;
              text-align: center;
              color: #000;
              @include background_color();
              border-radius: 4px;
              cursor: pointer;
              font-size: 12px;
              outline: none;
              border: 0;
              &:hover {
                opacity: .9;
              }
              &[disabled] {
                opacity: .5;
                cursor: not-allowed;
                background: #ccc;
              }
            }
          }
        }

        &:hover {
          transition: all 0.1s;
          box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .fixed-handler {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 64px;
    height: 68px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
    @include flex_center;
    flex-direction: column;
    z-index: 10;

    .item {
      margin: 0 auto;
      cursor: pointer;
      text-align: center;
      font-size: 14px;
      position: relative;
      color: #1A1A1A;

      &.hot:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #FF4F17;
      }
      .iconfont {
        font-size: 26px;
        line-height: 26px;
      }
    }
  }
}
